
import React, { useState } from "react";
import axios from "axios";
import UploadCard from "./components/UploadCard";
import FactorTable from "./components/FactorTable";
import ForecastCard from "./components/ForecastCard";
import ExportCard from "./components/ExportCard";

const API = "http://localhost:8000";

function App() {
  const [exposure, setExposure] = useState(null);
  const [forecast, setForecast] = useState(null);

  const handleUpload = async (file, name) => {
    const fd = new FormData();
    fd.append("file", file);
    fd.append("asset_name", name);
    const { data } = await axios.post(`${API}/upload`, fd);
    setExposure(data);
    // 自动预测
    const { data: fc } = await axios.post(`${API}/forecast`, data);
    setForecast(fc);
  };

  return (
    <div className="min-h-screen bg-gray-50 p-6">
      <header className="mb-8">
        <h1 className="text-3xl font-bold text-gray-800">Fama-French 五因子模型分析平台</h1>
        <p className="text-gray-600 mt-2">上传月度收益 CSV，即刻获取因子暴露、收益预测与风险估算</p>
      </header>

      <div className="grid gap-6 md:grid-cols-2">
        <UploadCard onUpload={handleUpload} />
        <ExportCard api={API} />
      </div>

      {exposure && (
        <>
          <FactorTable data={exposure} />
          <ForecastCard forecast={forecast} />
        </>
      )}
    </div>
  );
}

export default App;
